<template>
    <div class="file">
        <input type="file" class="form-control-file" id="exampleFormControlFile1" @change="fileChange" multiple>
        <img style="width:420px;height: 500px; display: flex;" :src="imgbase64">
    </div>
</template>

<script>

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap/dist/js/bootstrap"

export default {

    data() {
        return {
            imgbase64: "",
            imgList: [],
        }
    },
    methods: {
        fileChange(e) {
            let file = e.target.files[0]
            let _sliceBlob = new Blob([file].slice(0, 5000));
            let _sliceFile = new File([_sliceBlob], "test.png");
            let fr = new FileReader();
            fr.readAsDataURL(_sliceFile);
            let self = this;
            fr.onload = function () {
                self.imgbase64 = fr.result
            }
            if (e.target.files.lenth > 1) {
                this.imgList.concat(e.target.files)
            }
            else {
                this.imgList.push(e.target.files[0]);
            }
        },
    }

}
</script>

<style scoped>
.file {
    margin-left: 700px;
    margin-top: 30px;
}
</style>